<!--
 * @Descripttion: 网站入口-生态伙伴合作
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { useRouter } from 'vue-router'

  import { CommonImgEnum, PartnerImgEnum } from '/@/enums/imageEnum'

  const router = useRouter()

  /**
   * 路由跳转：信息收集（加入生态）
   */
  const goJoin = () => router.push('/partner/join')
</script>

<template>
  <div class="partner">
    <div class="hospital">
      <div class="hospital-banner">
        <img class="hospital-banner-bg" :src="PartnerImgEnum.hospitalBg" />
        <div class="hospital-banner-title">合作医院</div>
        <div class="hospital-banner-btn btn" @click="goJoin()">
          <span class="btn-text">加入生态</span>
          <img class="btn-arrow" :src="CommonImgEnum.searchArrow" />
        </div>
      </div>
      <div class="hospital-sry">
        <img class="hospital-sry-img" :src="PartnerImgEnum.hospitalSry" />
        <img class="hospital-sry-logo" :src="PartnerImgEnum.hospitalSryLogo" />
        <div class="hospital-sry-statistic">
          <div class="item">
            <div class="label">业务系统</div>
            <div class="value">
              <span class="number">23</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">表</div>
            <div class="value">
              <span class="number">350</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">数据量</div>
            <div class="value">
              <span class="number">57</span>
              <span class="unit">亿</span>
            </div>
          </div>
          <div class="item">
            <div class="label">临床数据中心表</div>
            <div class="value">
              <span class="number">34</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">运营数据中心表</div>
            <div class="value">
              <span class="number">27</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">科研数据中心表</div>
            <div class="value">
              <span class="number">5</span>
              <span class="unit"></span>
            </div>
          </div>
        </div>
        <div class="hospital-sry-desc">
          <div class="text">已成功建设了一个医疗数据资产池，三个数据中心；</div>
          <div class="text">其中数据湖涉及23个业务系统，近350张表，数据量高达57亿。</div>
          <div class="text">临床数据中心设计34张表，包含的数据域有患者域、就诊、病案、医嘱、费用、病历、检验、检查、手术、护理等。</div>
          <div class="text">运营数据中心，提供了27张中间表，为下游400多个院内指标提供数据支撑。</div>
          <div class="text">科研数据中心对大文本病历数据进行段落主题识别，沉淀了5张表，总记录数达到了300万，目前持续解析大文本专病数据集，目前以肾癌这个病种进行打样，对院内数据进行结构数据治理、命名实体识别，目前正在对病历数据进行后结构化处理。</div>
        </div>
      </div>
      <div class="hospital-wjw">
        <img class="hospital-wjw-img" :src="PartnerImgEnum.hospitalWjwBg" />
        <img class="hospital-wjw-logo" :src="PartnerImgEnum.hospitalWjwLogo" />
        <div class="hospital-wjw-statistic">
          <div class="item">
            <div class="label">基层公卫表</div>
            <div class="value">
              <span class="number">1100</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">三医联动表</div>
            <div class="value">
              <span class="number">20</span>
              <span class="unit"></span>
            </div>
          </div>
          <div class="item">
            <div class="label">费用类表</div>
            <div class="value">
              <span class="number">4</span>
              <span class="unit">+</span>
            </div>
          </div>
          <div class="item">
            <div class="label">肝胆疾病标准数据集</div>
            <div class="value">
              <span class="number">37</span>
              <span class="unit"></span>
            </div>
          </div>
        </div>
        <div class="hospital-wjw-desc">
          <div class="text">目前包含基层公卫表1100张，三医联动表20张，治理了4张费用类表，和37张肝胆疾病标准数据集，同时正在建设医师画像和患者画像。</div>
        </div>
      </div>
      <div class="hospital-other">
        <div class="hospital-other-da">
          <img class="img" :src="PartnerImgEnum.hospitalDaImg" />
          <img class="logo" :src="PartnerImgEnum.hospitalDaLogo" />
        </div>
        <div class="hospital-other-bs">
          <img class="img" :src="PartnerImgEnum.hospitalBsImg" />
          <img class="logo" :src="PartnerImgEnum.hospitalBsLogo" />
        </div>
      </div>
    </div>
    <div class="science">
      <div class="science-title">合作科研</div>
      <div class="science-btn btn" @click="goJoin()">
        <span class="btn-text">加入生态</span>
        <img class="btn-arrow" :src="CommonImgEnum.searchArrow" />
      </div>
      <div class="science-project">
        <div class="science-project-item fmt">
          <img class="img" :src="PartnerImgEnum.scienceFmtImg" />
          <img class="logo" :src="PartnerImgEnum.scienceFmtLogo" />
          <span class="name">北京富玛特生物科技有限公司</span>
        </div>
        <div class="science-project-item xh">
          <img class="img" :src="PartnerImgEnum.scienceXhImg" />
          <img class="logo" :src="PartnerImgEnum.scienceXhLogo" />
          <span class="name">字节跳动旗下医疗健康品牌</span>
        </div>
        <div class="science-project-item wzj">
          <img class="img" :src="PartnerImgEnum.scienceWzjImg" />
          <img class="logo" :src="PartnerImgEnum.scienceWzjLogo" />
          <span class="name">深圳未知君生物科技有限公司</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .partner {
    padding-bottom: 124px;
    background: #ebf6fc;
  }

  .hospital {
    .hospital-banner {
      position: relative;
      height: 466px;

      .hospital-banner-bg {
        width: 100%;
      }

      .hospital-banner-title {
        position: absolute;
        top: 240px;
        left: 0;
        right: 0;
        margin: auto;
        width: 192px;
        height: 48px;
        line-height: 48px;
        font-weight: 600;
        color: #1d2129;
        font-size: 48px;
      }

      .hospital-banner-btn {
        position: absolute;
        top: 328px;
        left: 0;
        right: 0;
        margin: auto;
      }
    }

    .hospital-sry {
      position: relative;
      width: 1760px;
      height: 600px;
      margin: auto;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
      background: #fff;

      .hospital-sry-img {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 880px;
        height: 560px;
      }

      .hospital-sry-logo {
        position: absolute;
        top: 40px;
        left: 940px;
        width: 286px;
        height: 80px;
      }

      .hospital-sry-statistic {
        position: absolute;
        top: 140px;
        left: 940px;
        display: flex;
        width: 780px;
        justify-content: space-between;
        height: 80px;
        padding: 16px 20px;
        border-radius: 8px;
        background: #214eb4;

        .item {
          .label {
            height: 20px;
            text-align: justified;
            line-height: 20px;
            font-size: 12px;
            color: rgb(255 255 255 / 80%);
          }

          .value {
            display: flex;
            align-items: center;

            .number {
              font-size: 20px;
              color: #fff;
            }

            .unit {
              margin: 2px 0 0 4px;
              font-size: 12px;
              color: #fff;
            }
          }
        }
      }

      .hospital-sry-desc {
        position: absolute;
        top: 240px;
        left: 940px;
        width: 780px;

        .text {
          text-align: justified;
          line-height: 28px;
          font-size: 16px;
          color: #1d2129;
        }
      }
    }

    .hospital-wjw {
      position: relative;
      width: 1760px;
      height: 600px;
      margin: 40px auto 0;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
      background: #fff;

      .hospital-wjw-img {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 880px;
        height: 560px;
      }

      .hospital-wjw-logo {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 454px;
        height: 64px;
      }

      .hospital-wjw-statistic {
        position: absolute;
        top: 144px;
        left: 40px;
        display: flex;
        justify-content: space-between;
        width: 780px;
        height: 80px;
        padding: 16px 20px;
        border-radius: 8px;
        background: #214eb4;

        .item {
          .label {
            height: 20px;
            text-align: justified;
            line-height: 20px;
            font-size: 12px;
            color: rgb(255 255 255 / 80%);
          }

          .value {
            display: flex;
            align-items: center;

            .number {
              font-size: 20px;
              color: #fff;
            }

            .unit {
              margin: 2px 0 0 4px;
              font-size: 12px;
              color: #fff;
            }
          }
        }
      }

      .hospital-wjw-desc {
        position: absolute;
        top: 244px;
        left: 40px;
        width: 780px;

        .text {
          text-align: justified;
          line-height: 28px;
          font-size: 16px;
          color: #1d2129;
        }
      }
    }

    .hospital-other {
      width: 1760px;
      height: 484px;
      margin: 40px auto 0;
      display: flex;
      justify-content: space-between;

      .hospital-other-da {
        position: relative;
        width: 860px;
        height: 484px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
        background: #fff;

        .img {
          display: block;
          width: 820px;
          height: 360px;
        }

        .logo {
          margin-top: 20px;
          width: 303px;
          height: 64px;
        }
      }

      .hospital-other-bs {
        position: relative;
        width: 860px;
        height: 484px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
        background: #fff;

        .img {
          display: block;
          width: 820px;
          height: 360px;
        }

        .logo {
          margin-top: 20px;
          width: 190px;
          height: 64px;
        }
      }
    }
  }

  .science {
    margin-top: 56px;

    .science-title {
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 48px;
      font-weight: 600;
      color: #1d2129;
    }

    .science-btn {
      margin: 40px auto 0;
    }

    .science-project {
      display: flex;
      gap: 40px;
      width: 1760px;
      height: 448px;
      margin: 64px auto 0;

      .science-project-item {
        position: relative;
        width: 560px;
        height: 448px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
        background: #fff;

        .img {
          position: absolute;
          top: 20px;
          left: 20px;
          width: 520px;
          height: 360px;
        }

        .logo {
          position: absolute;
        }

        .name {
          position: absolute;
          bottom: 22px;
          height: 24px;
          padding-left: 20px;
          text-align: justified;
          line-height: 24px;
          border-left: 1px solid #e5e6eb;
          font-size: 20px;
          font-weight: 500;
          color: #000;
        }

        &.fmt {
          .logo {
            left: 20px;
            bottom: 14px;
            width: 102px;
            height: 40px;
          }

          .name {
            left: 140px;
          }
        }

        &.xh {
          .logo {
            left: 20px;
            bottom: 16px;
            width: 162px;
            height: 36px;
          }

          .name {
            left: 202px;
          }
        }

        &.wzj {
          .logo {
            left: 20px;
            bottom: 14px;
            width: 114px;
            height: 40px;
          }

          .name {
            left: 155px;
          }
        }
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 54px;
    margin-top: 32px;
    border-radius: 30px;
    background: linear-gradient(270deg, #39bffc 0%, #246af3 94.05%);
    cursor: pointer;

    .btn-text {
      width: 72px;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }

    .btn-arrow {
      width: 22px;
      height: 22px;
      margin-left: 8px;
    }
  }
</style>
